<template>
  <div class="home">
    <div>
      <ul class="title">
        <li v-for="(item, index) in stus" :key="index">{{item.type}}</li>
      </ul>
      <ul class="content">
        <li v-for="(item, index) in stus" :key="index" @click="showAdd(index)">
          <ul class="task">
            <li :style="{
              textDecoration: el.isfinish ? 'line-through' :  'none'
            }" v-for="(el, i) in item.children" :key="i">{{el.task}}</li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="mask" v-show="showMask">
      <div>
        <button @click="showMask = false">关闭</button>
        <h2>{{stus[ind].type}}任务列表</h2>
        <ul>
          <li v-for="(item, i) in stus[ind].children" :key="i">
            {{item.task}}
            <span v-if="item.isfinish">已完成</span>
            <button v-else @click="finish(item)">完成</button>
            <button @click="del(i)">删除</button>
          </li>
        </ul>
        <div class="add">
          <textarea name="" id="" cols="200" rows="10" placeholder="填写任务" v-model="task"></textarea>
          <button @click="Add">添加</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      stus: [
        {
          type: '周一',
          children: [
            {
              task: '学习vue',
              isfinish: false
            }
          ]
        },{
          type: '周二',
          children: []
        },{
          type: '周三',
          children: []
        },{
          type: '周四',
          children: []
        },{
          type: '周五',
          children: []
        },{
          type: '周六',
          children: []
        },{
          type: '周日',
          children: []
        }
      ],

      ind: 0,
      task: '',
      showMask: false
    }
  },

  methods: {
    showAdd(i) {
      this.ind = i
      this.showMask = true
    },

    Add() {
      let obj= {
        task: this.task,
        isfinish: false
      }
      this.stus[this.ind].children.push(obj)
    },

    del(i) {
      if(!confirm('确定要删除吗？')) return
      this.stus[this.ind].children.splice(i, 1)
    },

    finish(item) {
      item.isfinish = true
    }
  }
}
</script>
<style lang="scss" scoped>
  .home {
    height: 100vh;
    .mask {
      width: 100%;
      height: 100%;
      background-color: rgba($color: #000000, $alpha: 0.4);
      position: fixed;
      top: 0;
      left: 0;
      padding: 40px 50px;
      & > div {
        background-color: #fff;
        width: 100%;
        height: 100%;
        position: relative;
        .add {
        position: absolute;
        width: 100%;
        display: flex;
        left: 0;
        bottom: 0;
          button, textarea {
            height: 60px;
            vertical-align: bottom;
          }
        } 
        textarea {
        width: calc(100% - 140px);}
      }
      
    }
  }
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .title, .content {
    display: flex;
    &>li {
      flex-basis: calc(100% / 7);
      text-align: center;
    }

    text-decoration: none;
  }
  .title li {
    line-height: 50px;
    background-color: #eee;
  }
  .task {
    width: 100%;
    border: 1px solid #eee;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  button {
  padding: 5px 50px;}
</style>
